<template>
    <p>{{ userStore }}</p>
    <!-- <p>{{ $pinia }}</p> -->
    <button @click="counterStore.increment">测试{{ counterStore.count }}</button>
    <button @click="userStore.setName('李四')">修改李四{{ userStore.name }}-{{ userStore.connectName }}</button>
    <button @click="userStore.$reset()">重置userStore的state状态</button>
    <button @click="handlePatchUser">批量修改user数值</button>
    <button @click="change">替换state</button>
</template>


<script setup lang="ts">
import { watch } from 'vue'
import { useCounterStore } from '../store/counter.js'
import { useUserStore } from '../store/user.js'
// import { storeToRefs } from 'pinia'

const counterStore = useCounterStore()

// const instance = getCurrentInstance()
// console.log(instance)
// let pinia = null;
// if (instance) {
//   pinia = instance.appContext.config.globalProperties.$pinia
// }



// const { count: sum, increment: add } = counterStore

// const { count: sum1 } = storeToRefs(counterStore)


// setTimeout(() => {
//   counterStore.increment()
//   console.log(counterStore.count)
//   add()
//   console.log('sum', sum, 'sum1', sum1.value)
// }, 1000)

const userStore = useUserStore()
// console.log(userStore.$state)

// console.log(counterStore.count)

const handlePatchUser = () => {
    userStore.$patch({
        name: '张三111',
        age: 180
    })
    userStore.$patch((state: any) => {
        state.name = '张三222'
    })
}

const change = () => {
    // if (instance) {
    //   const pinia = instance.appContext.config.globalProperties.$pinia
    //   console.log(pinia.state.value.user);

    //   pinia.state.value = {}
    // }


    // userStore.$state = {
    //   aa: 1
    // }
    // userStore.$patch({
    //   aa: 1
    // })
    // console.log(userStore)
}

// userStore.$subscribe((mutation, state) => {
//     console.log('mutation', mutation, 'state', state)
// })

watch(() => userStore.$state, (newVal, oldVal) => {
    console.log('watch', newVal, oldVal)
}, {
    deep: true
})

// console.log(pinia)
</script>



<style scoped></style>
